<template>
  <y-base-page title="意见反馈">
    <view class="y-scroll-container">
      <view class="y-card">
        <view class="y-title y-flex-between">
          <view class="">反馈类型</view>
          <y-navigator url="../my/my">
          <view class="">我的反馈</view>
          </y-navigator>
        </view>
        <view class="y-flex y-flex-wrap y-margin-top-md">
          <view class="tag" :class="{ active: index==id}" v-for="(it, index) in feedBackType.data" :key="it" @click="selectType(index)">{{ it }}</view>
        </view>
        </view>
      <view class="y-card">
        <view class="y-title">反馈内容</view>
        <picker class="y-flex1 y-bg-grey y-border-radius" @change="bindPickerChange" :range="addressType.data">
          <input class="y-form-input y-bg-grey y-margin-top-sm" placeholder="请选择服务类型" v-model="cAddressType" disabled />
        </picker>
        <view class="y-flex1 y-bg-grey y-border-radius pickerlist" style="margin-top: 20rpx;" v-if="addressType.value==0">
          <y-navigator class="Chooselist" url="../../../cbh/chooseHospital/chooseHospital" :options="{hospitalType:'patient'}">
						<view class="name">
							<text>{{hospital.name?hospital.name:'请选择所在医院'}}</text>
						</view>
				  </y-navigator>
        </view>
        <textarea placeholder="请输入反馈意见" v-model="feedbackContent" class="y-margin-bottom feed-back-content y-bg-grey y-padding y-margin-top y-flex1 y-border-radius" />
        <view class="upload_container">
					<view class="upload_image" v-for="(path,index) in pictureAddress" :key="index">
						<image :src="path" mode="aspectFill" @click="previewImage(path,pictureAddress)"/>
						<icon class="iconfont" color="#626262" type="clear" size="24" @tap="deleteImg(index)" v-if="!disabled"/>
					</view>
					<view class="uploadBtn" @tap="chooseImg" v-if="pictureAddress.length < 9 && !disabled">+</view>
				</view>
      </view>
    </view>
    <view class="y-bottom-container y-boxshow-bottom">
      <view class="y-flex1 y-bottom-btn y-bottom-btn-primary" @click="Submit">提交</view>
    </view>
  </y-base-page>
</template>

<script>
import {newFeedback,userHospital} from '@/api/ctmkt'
const baseUrl = process.env.NODE_ENV === 'development' ? 'https://gatewaytest.1-1dr.com' : 'https://gateway.1-1dr.com';
export default {
  data() {
    return {
      feedBackType: {
        data: ['与费用相关', '与服务相关', '与护理员相关', '其他类型'],
        selectd: {}
      },
      addressType: {
        data: ['住院', '居家'],
        value: '3'
      },
      serviceHospital: {
        data: [],
        value: ''
      },
      id:0,  //反馈类型(0:与费用相关,1:与服务相关,2:为与护理员相关,3:为其他类型)
      feedbackContent:'',  //反馈内容
      cServiceHospital:'',   //医院名称
      hospitalId:'',       //医院id
      cAddressType:'',   //服务地址类型(0:住院,1:居家)
      pictureAddress:[], //图片
      companyCode:'',
      hospital:""
    };
  },
  created () {
    uni.removeStorageSync('hospital')
  },

 onShow(){
   console.log('log',uni.getStorageSync('hospital'));
   this.hospital = uni.getStorageSync('hospital')
 },
  methods: {
   async selectType(index) {
      this.id = index
      this.$forceUpdate();
    },
    bindPickerChange(e) {
      this.addressType.value = e.detail.value;
      this.cAddressType = this.addressType.data[e.detail.value] 
      console.log('啥',this.cAddressType);
      console.log('id',this.addressType.value);
    },
    async addhospitalName(patient){
      
      // console.error(e);
      // this.serviceHospital.value = e.detail.value;
      // this.cServiceHospital = this.serviceHospital.data[e.detail.value] 
      // console.log('111',this.cServiceHospital);
      // console.log(e.detail.value);
    },
    // 选择图片
		chooseImg() {
			var that = this;
			var pics = [];
			  if (this.pictureAddress.length < 9) {
				uni.chooseImage({
				  count: 9 - this.pictureAddress.length,
				  sizeType: ['original', 'compressed'],
				  sourceType: ['album', 'camera'],
				  success: (res) => {
					var imgs = res.tempFilePaths;
					for(var i =0;i<imgs.length;i++){
						pics.push(imgs[i])
					}
					uni.showLoading('加载中');
					that.uploadimg({
						url:'/api/file/upload',
						path:pics,
					})
				  }
				});
			  } else {
				uni.showToast({
				  title: "最多九张图片哦!",
				  icon: "none"
				});
			  }
		},
    // 删除图片
		deleteImg(index) {
		  this.pictureAddress.splice(index, 1);
		},
    uploadimg(data){
			uni.showLoading('加载中');
			var that = this,
			i = data.i ? data.i : 0,
			success = data.success ? data.success : 0,
			fail = data.fail ? data.fail : 0;
			that.uploadImg = true;
			uni.uploadFile({
				url: baseUrl + data.url,
				filePath: data.path[i],
				// header:{
				// 	platformCode:that.$store.state.companyCode,
				// 	Authorization:that.requestHeader.Authorization
				// },
				name: 'file',
				success: (resp) => {
				  uni.hideLoading();
				  success++;
				  var str = resp.data //返回的结果，可能不同项目结果不一样
				  var pic = JSON.parse(str);
				  that.pictureAddress = that.pictureAddress.concat(pic.data[0].url);
				},
				fail: (res) => {
				  fail++;
				  console.log('fail:' + i + "fail:" + fail);
				},
				complete: () => {
				  i++;
				  if (i == data.path.length) { //当图片传完时，停止调用
					that.uploadImg = false;
					console.log('执行完毕');
					console.log('成功：' + success + " 失败：" + fail);
				  } else { //若图片还没有传完，则继续调用函数
					data.i = i;
					data.success = success;
					data.fail = fail;
					that.uploadimg(data);//递归，回调自己
				  }
				}
			  });
    },
    // 查看图片
		previewImage(url,imgs){
			uni.previewImage({
				current:url,
				urls:imgs
			})
		},
    
     async Submit(){
      //  console.log(this.id);
      //  console.log(this.addressType.value);
      //  console.log('asd',this.feedbackContent);
      let data ={
        feedbackType:this.id,   //反馈类型(0:与费用相关,1:与服务相关,2:为与护理员相关,3:为其他类型)
        feedbackContent:this.feedbackContent,  //反馈内容
        serviceAddressType:Number(this.addressType.value),   //服务地址类型(0:住院,1:居家)
        hospitalId:this.hospital.id || '',  //医院id
        hospitalName:this.hospital.name || '',  //医院名称
        pictureAddress:this.pictureAddress  //图片
      }
      const res = await newFeedback(data)
      if(res.data.code == 200){
					this.list = res.data.data
					uni.switchTab({
						url:`/pages/common/mine/mine`
					})
          uni.showToast({
						icon:'none',
						title:'添加成功',
						duration:2000,
					})
                }
      // console.log(res);
      // console.log(data);
    }
  }
};
</script>

<style lang="scss" scoped>
.tag {
  padding: 14rpx 22rpx;
  margin-right: 34rpx;
  margin-top: 24rpx;
  color: $text-color-grey;
  background-color: $bg-color-grey;
  &.active {
    color: $color-yellow;
    background-color: $bg-color-yellow;
  }
}
.feed-back-content {
  width: auto;
}
.Chooselist{
  margin: 0 1rpx;
}
.pickerlist{
  color: #999999;
 margin-top: 8px;
 height: 34px;
 line-height: 12px;
 padding: 0px 12px;
}
.upload_container {
		  display: flex;
		  align-items: center;
		  flex-wrap: wrap;
		  padding: 0 10rpx;
		  .uploadBtn {
		    width: 133rpx;
		    height: 133rpx;
		    background-color: $bg-color-white;
		    font-size: 40rpx;
		    color: #D2D2D2;
		    display: flex;
		    justify-content: center;
		    align-items: center;
			border: 1rpx solid #D2D2D2;
			margin-bottom: 25rpx;
		  }
		
		  .upload_image {
				display: flex;
				align-items: center;
				margin-right: 25rpx;
				position: relative;
				margin-bottom: 25rpx;
				&:nth-child(4n){
					margin-right: 0;
				}
		    .iconfont {
		      position: absolute;
		      right: -20rpx;
		      top: -20rpx;
		      color: #e03440;
		      opacity: 0.8;
		      z-index: 1;
		    }
		    image {
		      width: 133rpx;
		      height: 133rpx;
		    }
		  }
		}
</style>
